<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* white-space: normal;  不换行显示*/
            /* white-space: pre;  显示空格回车 不换行*/
            /* white-space: pre-wrap; 显示回车 空格 换行*/
            /* white-space: pre-line ; 显示回车 不显示空格 换行 */
            
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos rerum voluptatum assumenda rem. Accusantium reiciendis sit corporis enim corrupti, cupiditate nihil voluptatum iure velit quisquam praesentium asperiores tempora. Omnis, accusamus!
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            white-space: normal;

        }

    </div>

    <pre>
        预保留
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            white-space: normal;

        }

    </pre>
    
</body>
</html>